<template>
    <div class="container">
        <Card>
            <div class="card-title">销售简报</div>
            <div class="card-list">
                <Card>
                    <div class="card-item">
                        <div class="card-text">新增用户：{{ salesData.thisMonth }}</div>
                        <div class="card-text">较上月：{{calSalesData}}%</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">新增联系：{{contactData.thisMonth}}</div>
                        <div class="card-text">较上月：{{calContactData}}%</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">新增商机：{{ handlingData.thisMonth }}</div>
                        <div class="card-text">较上月：{{ calHandlingData }}%</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">新增合同：{{contractData.thisMonth}}</div>
                        <div class="card-text">较上月：{{calContractData}}%</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">合同金额：{{contractMoneyData.thisMonth}}</div>
                        <div class="card-text">较上月：{{calContractMoneyData}}</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">合同面积：{{ contractAreaData.thisMonth }}</div>
                        <div class="card-text">较上月：{{ calContractAreaData }}%</div>
                    </div>
                </Card>
                <Card>
                    <div class="card-item">
                        <div class="card-text">跟进记录：{{ newLogData.thisMonth }}</div>
                        <div class="card-text">较上月：{{calNewLogData}}</div>
                    </div>
                </Card>
            </div>
        </Card>
    </div>
</template>
<script>
import {saleCount,businessCount,contactCount,contractCount,moneyCount,followCount,areaCount} from '../../api/index'
export default {
    data(){
        return{
            // 新增用户
            salesData: {
                thisMonth: 0,
                lastMonth: 0
            },
            // 新增商机
            handlingData: {
                thisMonth: 0,
                lastMonth: 0
            },
            // 新增联系
            contactData: {
                thisMonth: 0,
                lastMonth: 0
            },
            // 新增合同
            contractData: {
                thisMonth: 0,
                lastMonth: 0
            },
            // 合同金额
            contractMoneyData: {
                thisMonth: 0.0,
                lastMonth: 0.0
            },
            // 跟进记录
            newLogData: {
                thisMonth: 0.0,
                lastMonth: 0.0
            },
            // 合同面积
            contractAreaData: {
                thisMonth: 0.0,
                lastMonth: 0.0
            },
        }
    },
    computed:{
        // 新增用户百分比
        calSalesData() {
            if (!this.handlingData.lastMonth || this.salesData.lastMonth <= 0) {
                return ((this.salesData.thisMonth - this.salesData.lastMonth) * 100).toFixed(2);
            }
            return (((this.salesData.thisMonth - this.salesData.lastMonth) / this.salesData.lastMonth) * 100).toFixed(2);
        },
        // 新增商机百分比
         calHandlingData() {
            if (!this.handlingData.lastMonth || this.handlingData.lastMonth <= 0) {
                return ((this.handlingData.thisMonth - this.handlingData.lastMonth) * 100).toFixed(2);
            }
            return (((this.handlingData.thisMonth - this.handlingData.lastMonth) / this.handlingData.lastMonth) * 100).toFixed(2);
        },
        // 新增联系数
        calContactData() {
            if (!this.contactData.lastMonth || this.contactData.lastMonth <= 0) {
                return ((this.contactData.thisMonth - this.contactData.lastMonth) * 100).toFixed(2);
            }
            return (((this.contactData.thisMonth - this.contactData.lastMonth) / this.contactData.lastMonth) * 100).toFixed(2);
        },
        // 新增合同
        calContractData() {
            if (!this.contractData.lastMonth || this.contractData.lastMonth <= 0) {
                return ((this.contractData.thisMonth - this.contractData.lastMonth) * 100).toFixed(2);
            }
            return (((this.contractData.thisMonth - this.contractData.lastMonth) / this.contractData.lastMonth) * 100).toFixed(2);
        },
        // 合同金额
        calContractMoneyData() {
            if (!this.contractMoneyData.lastMonth || this.contractMoneyData.lastMonth <= 0) {
                return ((this.contractMoneyData.thisMonth - this.contractMoneyData.lastMonth) * 100).toFixed(2);
            }
            return (((this.contractMoneyData.thisMonth - this.contractMoneyData.lastMonth) / this.contractMoneyData.lastMonth) * 100).toFixed(2);
        },
        // 跟进记录
        calNewLogData() {
            if (!this.newLogData.lastMonth || this.newLogData.lastMonth <= 0) {
                return ((this.newLogData.thisMonth - this.newLogData.lastMonth) * 100).toFixed(2);
            }
            return (((this.newLogData.thisMonth - this.newLogData.lastMonth) / this.newLogData.lastMonth) * 100).toFixed(2);
        },
        // 合同面积
        calContractAreaData() {
            if (!this.contractAreaData.lastMonth || this.contractAreaData.lastMonth <= 0) {
                return ((this.contractAreaData.thisMonth - this.contractAreaData.lastMonth) * 100).toFixed(2);
            }
            return (((this.contractAreaData.thisMonth - this.contractAreaData.lastMonth) / this.contractAreaData.lastMonth) * 100).toFixed(2);
        },
    },
    created(){
        this.loadData()
    },
    methods:{
        async loadData(){
            // 新增用户
            const res1 = await saleCount()
            this.salesData=res1
            // 新增商机
            const res2 = await businessCount()
            this.handlingData=res2
            // 新增联系数
            const res3 = await contactCount()
            this.contactData=res3
            // 新增合同
            const res4 = await contractCount()
            this.contractData=res4
            // 合同金额
            const res5 = await moneyCount()
            // console.log(res5.thisMonth.tofixed(2))
            // if (res5.thisMonth) {
            //     res5.thisMonth = res5.thisMonth.fixed(2);
            // } 
            // else {
            //     res5.thisMonth = (0).toFixed(2);
            // }
            // if (res5.lastMonth) {
            //     res5.lastMonth = res5.lastMonth.fixed(2);
            // } else {
            //     res5.lastMonth = (0).toFixed(2);
            // }
            // this.contractMoneyData = res5;
            // 跟进记录
            const res6 = await followCount()
            this.newLogData = res6;

            // 合同面积
            const res7 = await areaCount()
            console.log(res7)
            // if (res7.thisMonth) {
            //     res7.thisMonth = res7.thisMonth.fixed(2);
            // } else {
            //     res7.thisMonth = (0).toFixed(2);
            // }
            // if (res7.lastMonth) {
            //     res7.lastMonth = res7.lastMonth.fixed(2);
            // } else {
            //     res7.lastMonth = (0).toFixed(2);
            // }
            // this.contractAreaData = res7;


        }
    }
}
</script>
<style lang="less" scoped>
.card-title{
    font-weight: 600;
    font-size: 0.32rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ddd;
}
.card-list{
    margin-top: 0.2rem;
}
.card-item{
    display: flex;
    font-size: 0.3rem;
    justify-content: space-around;
    align-items: center;
}
.ivu-card{
    margin-bottom: 0.25rem;
}
</style>